<template>
  <div
      class="window_prompt_box"
      :style="{'background-color':promptBoxColor}"
      v-if="promptBoxShow">{{promptBoxInfo}}</div>
  <el-table :data="tableData" style="width: 90%" class="table">
    <el-table-column fixed prop="order_number" label="订单号" width="150" />
    <el-table-column label="商品预览" width="120" >
      <!-- 图片的显示 -->
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <img :src="'data:image/png;base64'+scope.row.url" width="100" height="100"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="good_specific" label="商品种类" width="150" />
    <el-table-column prop="pet_name" label="商品名称" width="150" />
    <el-table-column prop="product_number" label="商品数量" width="150" />
    <el-table-column prop="pay" label="是否付款" width="120" />
    <el-table-column prop="order_date" label="订单生成日期" width="120" />
    <el-table-column prop="deliver" label="是否已发送" width="120" />
    <el-table-column prop="phone" label="手机号" width="120" />
    <el-table-column prop="total_count" label="金额" width="120"/>
    <el-table-column prop="address" label="地址" width="400"/>
    <el-table-column prop="remarks" label="备注" width="300"/>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="Detail(scope.row)">查看详情</el-button>
        <el-button link type="primary" size="small" @click="GoPay(scope.row)">去付款</el-button>
      </template>
    </el-table-column>
  </el-table>
  <SplitPage :total_number="number" :page_size="5" @onPageChange="PageChange" class="splitBtn"/>
</template>

<script>
import SplitPage from "@/components/Personal/SplitPage";
export default {
  name: "OrderNotPay",
  inject:['reload'],
  components: {
    SplitPage
  },
  methods: {
    Detail(row) {
      this.orderShow.id = row.order_number
      this.orderShow.fromPage = 5
      this.$router.push({path:"/list",query:{order:JSON.stringify(this.orderShow)}})
      this.reload()
    },
    GoPay(row){
      this.$axios
          .put(`${this.$target}/order/pay/`+row.order_number)
          .then(res=>{
            if(res.data.status==0) {
              this.showSuccess("支付成功!")
              this.initTable()
            }else{
              this.showError("支付失败!")
            }
          })
    },
    PageChange(newPage){
      this.tableData=this.allData.slice(newPage*5-5,newPage*5>this.allData.length?this.allData.length:newPage*5)
    },
    initTable(){
      this.$axios
          .get(`${this.$target}/order/`+this.user.id)
          .then(res => {
            var dataArr=[]//已发货的订单数据列表
            for(var i=0;i<res.data.data.length;i++){
              if(!res.data.data[i].pay) {
                res.data.data[i].deliver=res.data.data[i].deliver?"已发货":"未发货"
                res.data.data[i].pay="未付款"
                if(res.data.data[i].remarks===null||res.data.data[i].remarks===""){
                  res.data.data[i].remarks="无"
                }
                dataArr.push(res.data.data[i])
              }
            }
            console.log(dataArr)
            this.number=dataArr.length
            this.allData=dataArr
            if(this.number!=0) {
              if(this.number<=this.current_page*5-5){//一页被删完时
                this.current_page-=1
              }
              this.tableData = this.allData.slice(this.current_page * 5 - 5, this.current_page * 5 > this.allData.length ? this.allData.length : this.current_page * 5)
            }else{//全部被删完
              this.tableData=[]
            }
          })
    },
    showSuccess(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#45cb45'
      this.promptBoxShow=true
      setTimeout(()=>{//用箭头函数保证this指向vue实例
        this.promptBoxShow=false
      }, 1000)
    },
    showError(text){
      this.promptBoxInfo=text
      this.promptBoxColor='#e12a2a'
      this.promptBoxShow=true
      setTimeout(()=>{
        this.promptBoxShow=false
      }, 1000)
    }
  },
  data() {
    return {
      current_page:1,
      number:0,
      allData:[],//全部已发货订单
      tableData:[],//要展示的页包含的订单
      promptBoxInfo:"",
      promptBoxColor:'',
      promptBoxShow:false,
      user:{},
      orderShow:{}
    }
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem("user"))
    this.initTable()
  }
}
</script>

<style scoped>
.table {
  position: relative;
  left: 50px;
  margin-top: 50px;
}
.splitBtn {
  position: relative;
  left:72%;
  margin-top: 40px;
  width: fit-content;
}
.window_prompt_box {
  position: absolute;
  color: white;
  top: 10px;
  left: 45%;
  width: 300px;
  height: 40px;
  border-radius: 10px;
  z-index: 9999;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding-top: 4px;
}
</style>